<template>
  <div class="container">
    <div class="customer flex">
      <div class="left">
        <span class="customer_pic">
          <img
            :src="guest_info.headurl !== '0' ? guest_info.headurl : '/static/imgs/system_user.png'"
          >
        </span>
      </div>
      <div class="right flex-item">
        <span class="customer_name">{{guest_info.name}}</span>
        <span class="customer_phone">手机号 {{guest_info.phone}}</span>
        <span class="customer_arrivetime">最近到店时间: {{guest_info.arrivetime}}</span>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_box charts">
        <div class="title">
          <i class="shu"></i>
          <span>近三月数据</span>
        </div>
        <div class="body">
          <canvas
            canvas-id="lineCanvas"
            disable-scroll="true"
            class="canvas"
            @touchstart="touchHandler"
          ></canvas>
        </div>
      </div>
      <div class="wrap_box base_info">
        <div class="title">
          <i class="shu"></i>
          <span>基本信息</span>
        </div>
        <div class="body">
          <div>
            <span class="flex-item">会员卡号</span>
            <span>{{guest_info.vipcard}}</span>
          </div>
          <div
            @tap="navigateTo"
            data-url="/pages/guest/customerlevelset/customerlevelset"
            :data-query="'{id:'+ guest_id +'}'"
          >
            <span class="flex-item">客户级别</span>
            <span v-if="guest_info.lv !== '' ">{{guest_info.lv}}类客户 ></span>
            <span v-else>未设置 ></span>
          </div>
          <div
            style="border-bottom: none;"
            @tap="navigateTo"
            data-url="/pages/guest/customerfollowstate/customerfollowstate"
            :data-query="'{id:'+ guest_id +'}'"
          >
            <span class="flex-item">跟进状态</span>
            <span>{{sanqi}} ></span>
          </div>
        </div>
      </div>
      <div class="wrap_box person_info">
        <div class="title">
          <i class="shu"></i>
          <span>个人信息</span>
        </div>
        <div class="body">
          <div
            v-for="(item, index) in navigations"
            :key="index"
            :data-url="item.url"
            :data-query="'{id:'+ guest_id +'}'"
            @tap="navigateTo"
            class="press"
          >
            <span class="icon_box flex">
              <i :class="item.class"></i>
            </span>
            <span>{{item.word}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wxCharts from '@/utils/wxcharts'
import wx from 'wx'
import api from '@/utils/api'
import moment from 'moment'
import Toast from '@/utils/toast'
let lineChart = null
export default {
  data () {
    return {
      guest_id: '',
      guest_info: {},
      sanqi: '',
      navigations: [
        {
          class: 'info',
          word: '账户信息',
          url: '/pages/guest/accountinfo/accountinfo'
        },
        {
          class: 'archives',
          word: '基本档案',
          url: '/pages/guest/archives/archives'
        },
        {
          class: 'records',
          word: '消费记录',
          url: '/pages/guest/buyrecords/buyrecords'
        },
        {
          class: 'plan',
          word: '客户规划',
          url: '/pages/guest/customerplan/customerplan'
        },
        {
          class: 'photo',
          word: '客户相册',
          url: '/pages/guest/customerphoto/customerphoto'
        },
        {
          class: 'log',
          word: '护理日志',
          url: '/pages/guest/customernurse/customernurse'
        },
        {
          class: 'hobby',
          word: '性格喜好',
          url: '/pages/guest/customerhobby/customerhobby'
        },
        {
          class: 'topic',
          word: '私密话题',
          url: '/pages/guest/customertopic/customertopic'
        },
        {
          class: 'diagnostic',
          word: '诊断信息',
          url: '/pages/guest/diagnosticinfo/diagnosticinfo'
        },
        {
          class: 'special',
          word: '特殊时期',
          url: '/pages/guest/customerspecial/customerspecial'
        }
      ]
    }
  },
  components: {

  },
  async onLoad () {
    const that = this
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 请求数据
    await Promise.all([
      that.get_threeinfo(),
      that.getguestbaseinfo()
    ])
  },
  methods: {
    async getguestbaseinfo () {
      const that = this
      const userInfo = wx.getStorageSync('userInfo')
      let paramObj = {
        guest_id: that.guest_id,
        orcode: userInfo['orcode']
      }
      const res = await api.getguestbaseinfo(paramObj)
      if (res.code === '100') {
        const nowtime = Math.round(Date.now() / 1000)
        const arrivetime = res.data[0].arrivetime
        const fuwuqi = res.sanqi.fuwuqi
        let sanqi = ''
        if (nowtime < (arrivetime + 86400 * fuwuqi)) {
          sanqi = '服务期'
        } else if ((arrivetime + 86400 * fuwuqi) < nowtime && nowtime < (arrivetime + 86400 * fuwuqi + 86400 * res.sanqi.pudianqi)) {
          sanqi = '铺垫期'
        } else {
          sanqi = '销售期'
        }
        res.data[0]['arrivetime'] = moment.unix(arrivetime).format('YYYY-MM-DD HH:mm')
        that.guest_info = res.data[0]
        that.sanqi = sanqi
      }
    },
    async get_threeinfo () {
      /* eslint-disable */
      const that = this
      const res = await api.getguestthreemonthinfo({ guest_id: that.guest_id })
      if (res.code === '100') {
        let numdata = []
        let yejidata = []
        let carddata = []
        numdata.push.apply(numdata, [res.qianyue[0].num, res.shangyue[0].num, res.benyue[0].num])
        yejidata.push.apply(yejidata, [res.qianyue[0].yeji, res.shangyue[0].yeji, res.benyue[0].yeji])
        carddata.push.apply(carddata, [res.qianyue[0].card + res.qianyue[0].usebalance, res.shangyue[0].card + res.shangyue[0].usebalance, res.benyue[0].card + res.benyue[0].usebalance])
        that.initChart(numdata, yejidata, carddata)
      } else {
        Toast(res.msg, 'noicon')
      }
    },
    initChart (numdata, yejidata, carddata) {
      /* eslint-disable */
      let windowWidth = 320
      try {
        const res = wx.getSystemInfoSync();
        const clientWidth = res.windowWidth;
        const rpxR = 750 / clientWidth
        windowWidth = 688 / rpxR
      } catch (e) {
        console.error('getSystemInfoSync failed!');
      }
      lineChart = new wxCharts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: ['前月', '上月', '本月'],
        animation: true,
        series: [{
          name: '现金',
          data: yejidata
        }, {
          name: '卡耗',
          data: carddata
        }, {
          name: '到店次数',
          data: numdata
        }],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          disabled: true
        },
        width: windowWidth,
        height: windowWidth / 1.72,
        dataLabel: false,
        dataPointShape: true,
        extra: {
          lineStyle: 'curve'
        }
      });
    },
    touchHandler (e) {
      lineChart.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    },
    navigateTo (e) {
      const dataset = e.mp.currentTarget.dataset
      const path = dataset.url
      let query = dataset.query
      if (query) {
        query = JSON.parse(query.replace(/(s*?{s*?|s*?,s*?)(['"])?([a-zA-Z0-9]+)(['"])?:/g, '$1"$3":'))
      }
      this.$router.push({ path: path, query: query })
    }
  }
}
</script>

<style scoped>
.customer {
  width: 100%;
  height: 246rpx;
  background-color: #ff4444;
}
.customer > div {
  height: 100%;
}
.customer_pic,
.customer_pic img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.customer .left {
  padding: 0 24rpx 0 46rpx;
}
.customer .right span {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}
.customer_name {
  font-size: 32rpx !important;
}
.customer_phone {
  padding: 16rpx 0 2rpx;
}
.wrap {
  position: absolute;
  width: 688rpx;
  left: 50%;
  top: 200rpx;
  transform: translateX(-50%);
}
.wrap_box {
  width: 100%;
  box-shadow: 0 6rpx 20rpx rgba(255, 68, 68, 0.1);
  background: #fff;
  border-radius: 24rpx;
  height: 320rpx;
  margin-bottom: 18rpx;
}
.wrap_box .title {
  padding-left: 34rpx;
  height: 76rpx;
  line-height: 76rpx;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.wrap_box.base_info .body {
  padding-left: 48rpx;
}
.wrap_box.base_info .body > div {
  height: 76rpx;
  padding-right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
}
.shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.person_info {
  height: 656rpx;
}
.wrap_box.person_info .body > div {
  width: 172rpx;
  height: 172rpx;
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: rgba(102, 102, 102, 1);
}
.wrap_box.person_info .body .icon_box {
  width: 100%;
  height: 56rpx;
  margin-bottom: 12rpx;
}
.wrap_box.person_info .body i {
  background-size: 100%;
  background-repeat: no-repeat;
}
.wrap_box.person_info .body i.info {
  width: 68rpx;
  height: 44rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_info.png);
}
.wrap_box.person_info .body i.archives {
  width: 46rpx;
  height: 42rpx;
  background-image: url(http://mytimg.178mr.com/kehu_icon_archives.png);
}
.wrap_box.person_info .body i.records {
  width: 44rpx;
  height: 52rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_records.png);
}
.wrap_box.person_info .body i.plan {
  width: 60rpx;
  height: 56rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_plan.png);
}
.wrap_box.person_info .body i.photo {
  width: 68rpx;
  height: 50rpx;
  background-image: url(http://mytimg.178mr.com/kehu_icon_photo.png);
}
.wrap_box.person_info .body i.log {
  width: 68rpx;
  height: 44rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_log.png);
}
.wrap_box.person_info .body i.hobby {
  width: 56rpx;
  height: 52rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_hobby.png);
}
.wrap_box.person_info .body i.topic {
  width: 52rpx;
  height: 56rpx;
  background-image: url(http://mytimg.178mr.com/kehu_icon_topic.png);
}
.wrap_box.person_info .body i.diagnostic {
  width: 56rpx;
  height: 56rpx;
  background-image: url(http://mytimg.178mr.com/kehu_icon_diagnostic.png);
}
.wrap_box.person_info .body i.special {
  width: 52rpx;
  height: 55rpx;
  background-image: url(http://mytimg.178mr.com/%7Fkehu_icon_special.png);
}
.charts {
  height: 500rpx;
}
</style>
<style>
.canvas {
  width: 100%;
  height: 400rpx;
}
.press {
  position: relative;
}
</style>